<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>031-m点击延迟</title>
    <style>
      #count {
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border: 1px solid #f87;
      }

      #but {
        font-size: 30px;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <p id="count">1</p>
      <div id="but">点击数字增加</div>

      <p>
        移动端浏览器里点击操作会存在300ms延迟，往往会造成点击延迟甚至点击无效，这个是众所周知的事情。
        2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。该方案就是上述300ms延迟的主要原因，当用户执行第一次单击后会预留300ms检测用户是否继续执行单击，若是则执行缩放操作，若否则执行点击操作。鉴于该方案的成功，其他移动端浏览器也复制了该方案，现在几乎所有移动端浏览器都配备该功能。而该方案引发的点击延迟被称为「点击穿透」。
        在前端领域里最早解决点击穿透是jQuery时代的zepto，估计现在大部分同学都未使用过zepto，其实它就是移动端版本的jquery。zepto封装tap事件能有效地解决点击穿透，通过监听document上的touch事件完成tap事件的模拟，并将tap事件冒泡到document上触发。
        在移动端浏览器上不使用click事件而使用touch事件是因为click事件有着明显的延迟，后续又出现fastclick。该解决方案监听用户是否做了双击操作，可正常使用click事件，而点击穿透就交给fastclick自动判断。更多fastclick原理可自行百度，在此不作过多介绍。
        fastclick有现成的NPM包，可直接安装到项目里。引入fastclick可使用click事件代替tap事件，接入方式极其简单。
      </p>
    </div>
    <script>
      var conut = 1
      document.getElementById('but').onclick = function () {
        document.getElementById('count').innerText = ++conut
      }
    </script>
  </body>
</html>
